<template>
  <el-carousel :interval="interval" arrow="always" indicator-position="outside">
    <el-carousel-item v-for="(image, index) in images" :key="index" class="carousel-item-image">
      <img :src="image" alt="">
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  name: 'Carousel',
  props: {
    images: {
      type: Array,
      required: true
    },
    interval: {
      type: Number,
      default: 5000
    }
  },
  methods: {
    
  }
}
</script>

<style scoped>
.carousel-item-image {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

.carousel-item-image img{
  height: 100%;
  width: 100%;
}

.carousel-item-enter-active,
.carousel-item-leave-active {
  transition: all 0.5s;
}

.carousel-item-enter,
.carousel-item-leave-to {
  opacity: 0;
}


</style>
